<template lang="html">

  <div class="address">

   <mt-header title="收货地址" fixed>
     <mt-button icon="back" slot="left" class="btn-back" @click="$router.go(-1)"></mt-button>

      <div slot="right">
          <mt-button icon="more"></mt-button>
      </div>
    </mt-header>

    <div class="main">
      <ul class="address-list">
        <li v-for='item in addressList' @click='_setDefaultAdd(item.address_id)'>
          <p>
            <span class="name">{{item.consignee}}</span>
            <span class="name">{{item.mobile}}</span>
            {{item.is_default === '1' ? '(默认地址)' : ''}}
          </p>
          <p>
            {{item.province + item.city + item.district + item.address}}
          </p>
        </li>
      </ul>
    </div>

    <v-baseline></v-baseline>
    <v-footer></v-footer>
  </div>
</template>

<script>
  // import * as mockData from '@/http/mock.js' //模拟数据

  import Baseline from '@/common/_baseline.vue'
  import Footer from '@/common/_footer.vue'
  import { addressList, setDefaultAdd } from  '@/api/address'
  import { Toast } from 'mint-ui'

  export default {
    components: {
      'v-baseline': Baseline,
      'v-footer': Footer,
    },
    data() {
      return {
        datas: '',
        addressList: []
      }
    },
    created () {
      this._addressList()
    },
    methods: {
      _addressList() {
        addressList().then(res => {
          if (res.code === 1) {
            this.addressList = res.data
          } else {
            Toast(res.message)
          }
        })
      },
      _setDefaultAdd (id) {
        setDefaultAdd({
          address_id: id
        }).then(res => {
          if (res.code === 1) {
            Toast('设置默认地址成功！')
            this._addressList()
          } else {
            Toast(res.message)
          }
        })
      }
    }
  }

</script>

<style lang="less" scoped>
  @import '../assets/fz.less';
  @import '../assets/index/style.css';
  @import '../assets/user/icon/carstyle.css';


  .address {
    width: 100%;
    padding-bottom: 14vw;
    background-color: rgb(242, 242, 242);
    font-size: 3.2vw;

    div, ul, li, span, a{
      box-sizing: border-box;
    }

    .flex{
      display: -ms-flex;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
    }

    .main {
      margin-top: 40px;
      font-size: 3.2vw;
      background: rgb(242, 242, 242);

      ul.address-list{
        background-color: inherit;

        li {
          padding: 2vh 2vw;
          margin-bottom: 1.5vh;
          box-shadow: 0 0.06vh 0.1vh 0.05vh #ccc;

          >p{
            margin-bottom: 1vh;

            &:last-child{
              margin-bottom: 0;
            }
          }

        }

      }

    }
  }

</style>
